<template>
    <div class="home">
        <div class="header">
            <mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
                <router-link to="/" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>
                <mt-button icon="more" slot="right"></mt-button>
            </mt-header>
        </div>
        <div class="btn-group">
            <mt-button type="default" size="large" @click.native="actionsheetClick">default</mt-button>
            <mt-button type="primary" size="large"  @click.native="handleClick">primary</mt-button>
            <mt-button type="danger" size="large">danger</mt-button>
            <mt-button size="small">small</mt-button>
            <mt-button size="large">large</mt-button>
            <mt-button size="normal">normal</mt-button>
            <mt-actionsheet
                :actions="actions"
                v-model="sheetVisible">
            </mt-actionsheet>
        </div>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import { Toast } from 'mint-ui';
export default {
    name: 'home',
    data() {
        return {
            sheetVisible: false,
            actions: [
                {name: '拍照', method: function(){console.log(alert('test'))}},
                {name: '测试咯', method: ''}
            ]
        }
    },
    methods: {
        handleClick() {
            MessageBox.confirm('确定执行此操作?').then(() => {
                Toast({
                    message: '操作成功',
                    iconClass: 'icon icon-success',
                    duration: 2000
                });
            });
        },
        actionsheetClick() {
            this.sheetVisible = !this.sheetVisible
        },
        test() {
            console.log('test');
        }
    }

}
</script>

<style scoped>
.btn-group {
    padding: 10px;
}
</style>